//通过独立类文件 draghandler.js 来处理8个拖柄操作
const DragHandler = {
    tagheight : 6, //tag标签块的高
    tagwidth  : 8 //tag标签块的宽
};

//静态方法：绑定到一个元素eleNode，新建一个TagBind拖柄控制器对象，绑定到目标元素，并返回这个拖柄控制器
DragHandler.bindToElement=function(eleNode){
    if (!eleNode) return null;
    //先处理位置数据，后面再处理渲染
    //clientHeight 就是透过浏览器看内容的这个区域高度。
    //offsetHeight 是网页内容实际高度，可以小于 clientHeight。
    //scrollHeight 是网页内容实际高度
    //元素相对于父元素的位置
    let eleHight = eleNode.offsetHeight; //相对于版面，整型，单位像素
    let eleWidth = eleNode.offsetWidth; //自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素
    let eleLeft = eleNode.offsetLeft; //自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素
    let eleTop = eleNode.offsetTop;
    console.log('eleNode,eleLeft,eleTop,eleHight,eleWidth:',eleLeft,eleTop,eleHight,eleWidth);
    
    let TagBind = {}; //实例变量//拖柄母块，8个标签绑定块组成的拖柄控制器, 渲染在body层上，作为独立于eleNode以外的组件，但位置粘附在eleNode上；
    TagBind.eleNode = eleNode; //所绑定的待控制元素
    TagBind.left= eleNode.getBoundingClientRect().left; //相对于屏幕窗体window
    TagBind.top = eleNode.getBoundingClientRect().top; //Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。
    TagBind.height = eleHight;
    TagBind.width = eleWidth;
    TagBind.posi = {}; //控制位置变量对象
    
    // TagBind.tagLeftTop = {
    //     pos:{
    //         scrLeft: TagBind.left-DragHandler.tagwidth/2, //相对于屏幕窗体window
    //         scrTop : TagBind.top-DragHandler.tagheight/2, //
    //         scrHeight : DragHandler.tagheight,
    //         scrWidth : DragHandler.tagwidth
    //     },
    // };
    
    console.log('TagBind:',TagBind);
    TagBind.eleParNode = eleNode.parentNode;
    console.log('TagBind.eleParNode:',TagBind.eleParNode);
    
    let nodeBody = eleNode.parentNode;
        while (nodeBody){
            console.log('parentNode.tagName:'+nodeBody.tagName,nodeBody);
            if (nodeBody.tagName && nodeBody.tagName.toUpperCase()=="BODY"){
                break;
            };
            let temp = nodeBody.parentNode; //再向上一层
            if (temp) {
                nodeBody=temp;
            }else{
                break;
            }
        };
    console.log('nodeBody:');
    console.dir(nodeBody); //显示body层
    
    //定义一些事件处理方法：
    TagBind.doeleTagBaseboardclick=function(event){
        console.log('doeleTagBaseboardclick',event);
    };
    
    //1/8Tag鼠标按下
    TagBind.doTagMouseDown=function(event){
        console.log('doTagMouseDown',event);
        let srcEle = event.srcElement || event.target;
        let tagbindName = srcEle.tagbindName;
        TagBind.currentTagbindName=tagbindName;
        
        TagBind.posi.startX = event.pageX; //相对于页面左边距离
        TagBind.posi.startY = event.pageY; //相对于页面顶边距离
        console.log('doTagMouseDown,tagbindName,pageX,pageY:',tagbindName,event.pageX,event.pageY);

        //let rectInfo = TagBind.eleTagBaseboard.getBoundingClientRect(); //底板矩形
        let rectInfo = TagBind.eleNode.getBoundingClientRect(); //目标矩形
        TagBind.posi.startLeft = rectInfo.left;
        TagBind.posi.startTop = rectInfo.top;
        TagBind.posi.startWidth = rectInfo.width;
        TagBind.posi.startHeight = rectInfo.height;
        console.log('doTagMouseDown,eleTagBaseboard.rectInfo:',rectInfo);
        
    };
    //1/8Tag鼠标弹起
    TagBind.doTagMouseUp=function(event){
        console.log('doTagMouseUp',event);
        TagBind.currentTagbindName="";
    };
    //1/8Tag鼠标移动
    TagBind.doTagMouseMove=function(event){
        event.preventDefault();
        event.stopPropagation(); 
        if (!TagBind.currentTagbindName) return;
        console.log('doTagMouseMove',event);
        const diffX = event.pageX - TagBind.posi.startX,
              diffY = event.pageY - TagBind.posi.startY;
        console.log('doTagMouseMove,diffX:',diffX);

        let endLeft = TagBind.posi.startLeft + diffX,
            endTop = TagBind.posi.startTop + diffY;
        let left,top,width,height;
        //对应拖柄操作
        switch(TagBind.currentTagbindName) {
          case 'TagRightMid' :
            width = TagBind.posi.startWidth + diffX;
            break;
          case 'TagBottomMid' :
            height = TagBind.posi.startHeight + diffY;
            break;
          case 'TagTopMid' :
            height = TagBind.posi.startHeight - diffY;
            break;
          case 'TagLeftMid' :
            width = TagBind.posi.startWidth - diffX;
            break;
            
          case 'TagLeftTop' :
            width = TagBind.posi.startWidth - diffX;
            height = width / TagBind.posi.startWidth * TagBind.posi.startHeight;
            break;            
          case 'TagTopRight' :
            width = TagBind.posi.startWidth + diffX;
            height = width / TagBind.posi.startWidth * TagBind.posi.startHeight;
            break;
          case 'TagBottomLeft' :
            width = TagBind.posi.startWidth - diffX;
            height = width / TagBind.posi.startWidth * TagBind.posi.startHeight;
            break;
          case 'TagBottomRight' :
            width = TagBind.posi.startWidth + diffX;
            height = width / TagBind.posi.startWidth * TagBind.posi.startHeight;
            break;
            
        };
        
        const height1 = height+"px";
        const width1 = width+"px";
        //TagBind.eleTagBaseboard.style.height = height1;
        TagBind.eleNode.style.height = height1;
        //TagBind.eleTagBaseboard.style.width = width1;
        TagBind.eleNode.style.width = width1;
        TagBind.adjustSize();
    };
    
    //底板鼠标移动事件:
    TagBind.doBaseboardMove=function(event){
        //console.log('doBaseboardMove:',event);        
    };
    
    TagBind.adjustSize=function(){
        let eleHight = TagBind.eleNode.offsetHeight; //相对于版面，整型，单位像素
        let eleWidth = TagBind.eleNode.offsetWidth; //自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素
        //let eleLeft = TagBind.eleNode.offsetLeft; //自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素
        //let eleTop = TagBind.eleNode.offsetTop;
        //console.log('eleNode,eleLeft,eleTop,eleHight,eleWidth:',eleLeft,eleTop,eleHight,eleWidth);
        
        TagBind.left= TagBind.eleNode.getBoundingClientRect().left; //相对于屏幕窗体window
        TagBind.top = TagBind.eleNode.getBoundingClientRect().top;
        TagBind.height = eleHight;
        TagBind.width = eleWidth;
      
        let eleTagLeftTop = TagBind.eleTagLeftTop;
      if (eleTagLeftTop){  
        eleTagLeftTop.style.height = DragHandler.tagheight+"px";
        eleTagLeftTop.style.width = DragHandler.tagwidth+"px";
        eleTagLeftTop.style.left = (-DragHandler.tagwidth/2)+"px"; //TagBind.tagLeftTop.pos.scrLeft+
        eleTagLeftTop.style.top = (-DragHandler.tagheight/2)+"px"; //TagBind.tagLeftTop.pos.scrTop+
      };
      
        let eleTagTopMid = TagBind.eleTagTopMid;
      if (eleTagTopMid){  
        eleTagTopMid.style.height = DragHandler.tagheight+"px";
        eleTagTopMid.style.width = DragHandler.tagwidth+"px";
        //eleTagTopMid.style.left = (widthB/2-DragHandler.tagwidth/2)+"px"; //
        //eleTagTopMid.style.top = (-1.5*DragHandler.tagheight+1)+"px"; //
        eleTagTopMid.style.left = (TagBind.width/2-DragHandler.tagwidth/2)+"px"; //50%
        eleTagTopMid.style.marginLeft = (-DragHandler.tagwidth/2)+"px";
        eleTagTopMid.style.top = (-DragHandler.tagheight/2)+"px"; //TagBind.tagLeftTop.pos.scrTop+
      };
        
        let eleTagTopRight = TagBind.eleTagTopRight;
        //console.log('adjustSize,eleTagTopRight:',eleTagTopRight);
      if (eleTagTopRight){  
        eleTagTopRight.style.height = DragHandler.tagheight+"px";
        eleTagTopRight.style.width = DragHandler.tagwidth+"px";
        eleTagTopRight.style.left = (TagBind.width-DragHandler.tagwidth-2)+"px"; //
        //eleTagTopRight.style.top = (-3*DragHandler.tagheight+2)+"px"; //
        eleTagTopRight.style.top = (-DragHandler.tagheight/2)+"px"; //
        //eleTagTopRight.style.right = (-DragHandler.tagwidth/2)+"px"; //
        //console.dir(eleTagTopRight);
      };  
        
        let eleTagLeftMid = TagBind.eleTagLeftMid;
      if (eleTagLeftMid){  
        eleTagLeftMid.style.height = DragHandler.tagheight+"px";
        eleTagLeftMid.style.width = DragHandler.tagwidth+"px";
        eleTagLeftMid.style.left = (-DragHandler.tagwidth/2)+"px"; //TagBind.tagLeftTop.pos.scrLeft+
        eleTagLeftMid.style.top = (TagBind.height/2-DragHandler.tagheight/2)+"px"; //50%
        eleTagLeftMid.style.marginTop = (-DragHandler.tagheight/2)+"px";
      };  
        
        let eleTagRightMid = TagBind.eleTagRightMid;
        //console.log('adjustSize,eleTagRightMid:',eleTagRightMid);
      if (eleTagRightMid){  
        eleTagRightMid.style.height = DragHandler.tagheight+"px";
        eleTagRightMid.style.width = DragHandler.tagwidth+"px";
        eleTagRightMid.style.left = (TagBind.width-DragHandler.tagwidth-2)+"px"; //
        //eleTagRightMid.style.right = (-DragHandler.tagwidth/2)+"px"; //
        eleTagRightMid.style.top = (TagBind.height/2-DragHandler.tagheight/2)+"px"; //50%
        eleTagRightMid.style.marginTop = (-DragHandler.tagheight/2)+"px";
        //console.dir(eleTagRightMid);
      };  
        
        let eleTagBottomLeft = TagBind.eleTagBottomLeft;
      if (eleTagBottomLeft){  
        eleTagBottomLeft.style.height = DragHandler.tagheight+"px";
        eleTagBottomLeft.style.width = DragHandler.tagwidth+"px";
        eleTagBottomLeft.style.left = (-DragHandler.tagwidth/2)+"px"; //
        eleTagBottomLeft.style.top = (TagBind.height-DragHandler.tagheight)+"px";
        //eleTagBottomLeft.style.bottom = (-DragHandler.tagheight/2)+"px"; //(heightB-DragHandler.tagheight)+
      };  
        
        let eleTagBottomMid = TagBind.eleTagBottomMid;
      if (eleTagBottomMid){  
        eleTagBottomMid.style.height = DragHandler.tagheight+"px";
        eleTagBottomMid.style.width = DragHandler.tagwidth+"px";
        eleTagBottomMid.style.left = (TagBind.width/2-DragHandler.tagwidth/2)+"px"; //50%
        eleTagBottomMid.style.marginLeft = (-DragHandler.tagwidth/2)+"px";
        eleTagBottomMid.style.top = (TagBind.height-DragHandler.tagheight)+"px"; //
        //eleTagBottomMid.style.bottom = (-DragHandler.tagheight/2)+"px"; //
      };  
        
        let eleTagBottomRight = TagBind.eleTagBottomRight;
      if (eleTagBottomRight){  
        eleTagBottomRight.style.height = DragHandler.tagheight+"px";
        eleTagBottomRight.style.width = DragHandler.tagwidth+"px";
        eleTagBottomRight.style.left = (TagBind.width-DragHandler.tagwidth-2)+"px"; //
        eleTagBottomRight.style.top = (TagBind.height-DragHandler.tagheight)+"px"; //
        //eleTagBottomRight.style.right = (TagBind.width-DragHandler.tagwidth/2)+"px"; //
        //eleTagBottomRight.style.bottom = (TagBind.height-DragHandler.tagheight/2)+"px"; //
      };  
                
    };
        
    if (nodeBody!=null){
        //解决拖拽时鼠标离开目标区而脱把的问题：底板做成父元素的区域
        
        //TagBind拖柄母块要做一个透明的div(name=TagBaseboard,对象：eleTagBaseboard),即底板
        //let heightB = (TagBind.height+DragHandler.tagheight);
        //let widthB = (TagBind.width+DragHandler.tagwidth);
        ///let heightB = (TagBind.height); // 目标块
        ///let widthB = (TagBind.width); // 目标块
        let heightB = (TagBind.eleParNode.offsetHeight); //改为目标块的父层
        let widthB = (TagBind.eleParNode.offsetWidth);//改为目标块的父层
        ///let leftB = (TagBind.left); // 目标块
        ///let topB = (TagBind.top); // 目标块
        let leftB = (TagBind.eleParNode.offsetLeft); //改为目标块的父层
        let topB = (TagBind.eleParNode.offsetTop); //改为目标块的父层
        console.log('Baseboard.heightB,',heightB);
        console.log('Baseboard.widthB,',widthB);
        console.log('Baseboard.leftB,',leftB);
        console.log('Baseboard.topB,',topB);
        
        let eleTagBaseboard = document.createElement('div');
        eleTagBaseboard.style.height = heightB+"px";
        eleTagBaseboard.style.width = widthB+"px";
        eleTagBaseboard.style.position='absolute'; //position: absolute;
        //eleTagBaseboard.style.left = (TagBind.left-DragHandler.tagwidth/2)+"px";
        //eleTagBaseboard.style.top = (TagBind.top-DragHandler.tagheight/2)+"px";
        eleTagBaseboard.style.left = (leftB)+"px";
        eleTagBaseboard.style.top = (topB)+"px";
        eleTagBaseboard.style.border = "dashed 4px red";
        //eleTagBaseboard.style.border.width = "4px";
        //eleTagBaseboard.style.borderStyle = "dashed";
        eleTagBaseboard.style.backgroundColor = "rgba(250,250,250,0.1)";
        //eleTagBaseboard.style.opacity = 0;
        eleTagBaseboard.style.cursor = 'move'; //crosshair:黑十字,move:移动箭头十字
        
        eleTagBaseboard.tagbindName = 'TagBaseboard';
        eleTagBaseboard.addEventListener("click",TagBind.doeleTagBaseboardclick,false);
        eleTagBaseboard.tagBind = TagBind;
        TagBind.eleTagBaseboard = eleTagBaseboard;       
        nodeBody.appendChild(eleTagBaseboard);
        
        eleTagBaseboard.addEventListener("mousemove",TagBind.doBaseboardMove,false);
        
        //然后8个拖柄做在eleTagBaseboard上：
        let sPosition = 'absolute'; //relative
        let eleTagLeftTop = document.createElement('div');
        eleTagLeftTop.style.height = DragHandler.tagheight+"px";
        eleTagLeftTop.style.width = DragHandler.tagwidth+"px";
        eleTagLeftTop.style.position=sPosition; //position: absolute;
        eleTagLeftTop.style.border = "solid thin red";
        eleTagLeftTop.style.backgroundColor = "blue";
        eleTagLeftTop.style.cursor = 'nwse-resize';
        
        eleTagLeftTop.tagbindName = 'TagLeftTop';
        eleTagLeftTop.addEventListener("mousedown",TagBind.doTagMouseDown,false);
        eleTagLeftTop.addEventListener("mouseup",TagBind.doTagMouseUp,false);
        eleTagLeftTop.addEventListener("mousemove",TagBind.doTagMouseMove,false);
        TagBind.eleTagLeftTop = eleTagLeftTop;
        eleTagBaseboard.appendChild(eleTagLeftTop);
        
        let eleTagTopMid = document.createElement('div');
        eleTagTopMid.style.height = DragHandler.tagheight+"px";
        eleTagTopMid.style.width = DragHandler.tagwidth+"px";
        eleTagTopMid.style.position=sPosition; //position: absolute;
        eleTagTopMid.style.border = "solid thin red";
        eleTagTopMid.style.backgroundColor = "blue";
        eleTagTopMid.style.cursor = 'ns-resize';
        
        eleTagTopMid.tagbindName = 'TagTopMid';
        eleTagTopMid.addEventListener("mousedown",TagBind.doTagMouseDown,false);
        eleTagTopMid.addEventListener("mouseup",TagBind.doTagMouseUp,false);
        eleTagTopMid.addEventListener("mousemove",TagBind.doTagMouseMove,false);
        eleTagTopMid.tagBaseboard = eleTagBaseboard;
        TagBind.eleTagTopMid = eleTagTopMid;
        eleTagBaseboard.appendChild(eleTagTopMid);
        
        let eleTagTopRight = document.createElement('div');
        eleTagTopRight.style.height = DragHandler.tagheight+"px";
        eleTagTopRight.style.width = DragHandler.tagwidth+"px";
        eleTagTopRight.style.position=sPosition; //position: absolute;
        eleTagTopRight.style.border = "solid thin red";
        eleTagTopRight.style.backgroundColor = "blue";
        eleTagTopRight.style.cursor = 'nesw-resize';
        
        eleTagTopRight.tagbindName = 'TagTopRight';
        eleTagTopRight.addEventListener("mousedown",TagBind.doTagMouseDown,false);
        eleTagTopRight.addEventListener("mouseup",TagBind.doTagMouseUp,false);
        eleTagTopRight.addEventListener("mousemove",TagBind.doTagMouseMove,false);
        eleTagTopRight.tagBaseboard = eleTagBaseboard;
        TagBind.eleTagTopRight = eleTagTopRight;
        eleTagBaseboard.appendChild(eleTagTopRight);
        
        let eleTagLeftMid = document.createElement('div');
        eleTagLeftMid.style.height = DragHandler.tagheight+"px";
        eleTagLeftMid.style.width = DragHandler.tagwidth+"px";
        eleTagLeftMid.style.position=sPosition; //position: absolute;
        eleTagLeftMid.style.border = "solid thin red";
        eleTagLeftMid.style.backgroundColor = "blue";
        eleTagLeftMid.style.cursor = 'ew-resize';
        
        eleTagLeftMid.tagbindName = 'TagLeftMid';
        eleTagLeftMid.addEventListener("mousedown",TagBind.doTagMouseDown,false);
        eleTagLeftMid.addEventListener("mouseup",TagBind.doTagMouseUp,false);
        eleTagLeftMid.addEventListener("mousemove",TagBind.doTagMouseMove,false);
        eleTagLeftMid.tagBaseboard = eleTagBaseboard;
        TagBind.eleTagLeftMid = eleTagLeftMid;
        eleTagBaseboard.appendChild(eleTagLeftMid);
        
        let eleTagRightMid = document.createElement('div');
        eleTagRightMid.style.height = DragHandler.tagheight+"px";
        eleTagRightMid.style.width = DragHandler.tagwidth+"px";
        eleTagRightMid.style.position=sPosition; //position: absolute;
        eleTagRightMid.style.border = "solid thin red";
        eleTagRightMid.style.backgroundColor = "blue";
        eleTagRightMid.style.cursor = 'ew-resize';
        
        eleTagRightMid.tagbindName = 'TagRightMid';
        eleTagBaseboard.addEventListener("mousedown",TagBind.doTagMouseDown,false);
        eleTagBaseboard.addEventListener("mouseup",TagBind.doTagMouseUp,false);
        eleTagBaseboard.addEventListener("mousemove",TagBind.doTagMouseMove,false);
        eleTagRightMid.tagBaseboard = eleTagBaseboard;
        TagBind.eleTagRightMid = eleTagRightMid;
        eleTagBaseboard.appendChild(eleTagRightMid);
        
        let eleTagBottomLeft = document.createElement('div');
        eleTagBottomLeft.style.height = DragHandler.tagheight+"px";
        eleTagBottomLeft.style.width = DragHandler.tagwidth+"px";
        eleTagBottomLeft.style.position=sPosition; //position: absolute;
        eleTagBottomLeft.style.border = "solid thin red";
        eleTagBottomLeft.style.backgroundColor = "blue";
        eleTagBottomLeft.style.cursor = 'nesw-resize';
        
        eleTagBottomLeft.tagbindName = 'TagBottomLeft';
        eleTagBottomLeft.addEventListener("mousedown",TagBind.doTagMouseDown,false);
        eleTagBottomLeft.addEventListener("mouseup",TagBind.doTagMouseUp,false);
        eleTagBottomLeft.addEventListener("mousemove",TagBind.doTagMouseMove,false);
        eleTagBottomLeft.tagBaseboard = eleTagBaseboard;
        TagBind.eleTagBottomLeft = eleTagBottomLeft;
        eleTagBaseboard.appendChild(eleTagBottomLeft);
        
        let eleTagBottomMid = document.createElement('div');
        eleTagBottomMid.style.height = DragHandler.tagheight+"px";
        eleTagBottomMid.style.width = DragHandler.tagwidth+"px";
        eleTagBottomMid.style.position=sPosition; //position: absolute;
        eleTagBottomMid.style.border = "solid thin red";
        eleTagBottomMid.style.backgroundColor = "blue";
        eleTagBottomMid.style.cursor = 'ns-resize';
         
        eleTagBottomMid.tagbindName = 'TagBottomMid';
        eleTagBottomMid.addEventListener("mousedown",TagBind.doTagMouseDown,false);
        eleTagBottomMid.addEventListener("mouseup",TagBind.doTagMouseUp,false);
        eleTagBottomMid.addEventListener("mousemove",TagBind.doTagMouseMove,false);
        eleTagBottomMid.tagBaseboard = eleTagBaseboard;
        TagBind.eleTagBottomMid = eleTagBottomMid;
        eleTagBaseboard.appendChild(eleTagBottomMid);

        let eleTagBottomRight = document.createElement('div');
        eleTagBottomRight.style.height = DragHandler.tagheight+"px";
        eleTagBottomRight.style.width = DragHandler.tagwidth+"px";
        eleTagBottomRight.style.position=sPosition; //position: absolute;
        eleTagBottomRight.style.border = "solid thin red";
        eleTagBottomRight.style.backgroundColor = "blue";
        eleTagBottomRight.style.cursor = 'nwse-resize';
        
        eleTagBottomRight.tagbindName = 'TagBottomRight';
        eleTagBottomRight.addEventListener("mousedown",TagBind.doTagMouseDown,false);
        eleTagBottomRight.addEventListener("mouseup",TagBind.doTagMouseUp,false);
        eleTagBottomRight.addEventListener("mousemove",TagBind.doTagMouseMove,false);
        eleTagBottomRight.tagBaseboard =  eleTagBaseboard;
        TagBind.eleTagBottomRight = eleTagBottomRight;
        eleTagBaseboard.appendChild(eleTagBottomRight);
        
        TagBind.adjustSize();
    };

    return TagBind;
}

//window.DragHandler = DragHandler;
//alert('window.DragHandler = DragHandler;');